import BaseComponent from "../../app/baseComponent";

export class AUICheckboxGroup extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            value: {
                required: true
            },
            inline: {
                type: Boolean,
                default: true
            },
            name: {
                type: String,
                require: true  
            }
        };
        this.methods = {
            handleChange(e, checkbox) {
                var self = this;
                checkbox.__selected = !checkbox.__selected;
                if (checkbox.selected) {
                    checkbox.selected = checkbox.__selected;
                }
                self.$emit("input", self.getValue())
            },
            getValue() {
                var self = this;
                return self.private_checkboxs.filter(function (v) {
                    return v.__selected;
                }).map(function (v) {
                    return v.value;
                })
            },
            setCheckboxs(checkboxs) {
                this.private_checkboxs = checkboxs.map(function (v) {
                    if (v.selected) {
                        v.__selected = v.selected;
                    } else {
                        v.__selected = false;
                    }
                    return v;
                })
            }
        }
    }
    _template() {
        var self = this;
return `<div class="${self._name}">
    <div class="${self._name}__item" v-for="checkbox in private_checkboxs">
        <label :class="{'checkbox-inline': inline}">           
            <input type="checkbox" 
                :name="name" @change="handleChange($event, checkbox)" :checked="checkbox.__selected" :value="checkbox.value">
            <span v-html="checkbox.label"></span>
        </label>           
    </div>
</div>`;
    }
    _data() {
        var ret = {};
        ret.private_checkboxs = [];
        return ret;
    }
}

AUICheckboxGroup.install = function () {
    window.AUICustomComponents.define("aui-checkbox-group", AUICheckboxGroup);
};